<template>
	<view class="">
		<Header :title="title" :isHome="true" :isWhite='true'></Header>
		<view class="topOn">
			<view class="">
				<span class="schedule">答题进度</span>
				<span class="count">{{count+1}}</span>
				<span class="totalCount">/{{totalCount}}</span>
			</view>
			<view class="">
				<span class="countdownTitle">倒计时间</span>
				<span class="countdownSeconds">{{ countdownSeconds }}s</span>
			</view>
		</view>
		<view class="">

			<view class="main" :key="index">
				<span class="typeLogo" v-if="item.type==1">
					填空题
				</span>
				<span class="typeLogo" v-if="item.type==2">
					判断题
				</span>
				<span class="typeLogo" v-if="item.type==3">
					选择题
				</span>
				<span class="title">{{count+1}}、{{subjectList[count].title}}({{subjectList[count].score}}分)</span>
				<view class="" v-if="subjectList[count].textbook">
					<image :src="subjectList[count].textbook" mode="" class="textbook"></image>
				</view>
				<!-- 选项 -->
				<view class="chapterAll">
					<view :class="optionSelected[inx]?'chapter-active':'chapter'" v-for="(itm,inx) in numList"
						:key="inx">
						<view class="flex" @click="chooseAnswer()">
							<view class="">
								{{itm.num}}
							</view>

							<image src="/static/one.png" mode="" class="three"></image>
						</view>

					</view>
				</view>
			</view>
			<!-- 失利 -->

			<view>
				<u-popup :show="show" :round="12" mode="center" @close="close" @open="open">
					<view class="popContent">
						<view class="">
							<image src="/static/lose.png" mode="" class="qr"></image>
						</view>
						<view class="title">闯关失利</view>
						<view class="popCon">
							请再接再厉哦！
						</view>
						<view class="allBtn">
							<view class="fanhui">
								返回
							</view>
							<view class="continue">
								继续闯关
							</view>
						</view>
						<view class="" @click="goPage('/subpages/banner/leaderboard')">
							<image src="/static/board.png" mode="" class="board"></image>
							<span>排行榜</span>
						</view>

					</view>
				</u-popup>
			</view>
			<!-- <view class="bottom">
				<view class="submitBtn" v-if="count+1==totalCount" @click="submit">
					提交同步练
				</view>
				<view class="bottom-info">

					<view class="">
						总分：100分
					</view>
					<view class="bottom-flex">
						<view class="changeBtn" v-if="count>0" @click="previous">
							上一题
						</view>
						<view class="changeBtndis" v-if="count==0">
							上一题
						</view>
						<view class="changeBtn" v-if="count!=totalCount" @click="next">
							下一题
						</view>
						<view class="changeBtndis" v-if="count==totalCount">
							下一题
						</view>
					</view>
					<view class="">
						<span class="count">{{count+1}}/</span>
						<span class="totalCount">{{totalCount}}</span>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				countdownSeconds: 30,
				show: false,
				title: '题目标题',
				count: 0,
				totalCount: 4,
				selectedOptions: {},
				optionSelected: {},
				subjectList: [{
					id: 1,
					title: '16+9=？',
					score: '10',
					type: '1', //填空题
					textbook: '/static/textbook.png',
				}, ],
				numList: [{
						num: 1,
					},
					{
						num: 2,
					},
					{
						num: 3,
					},
					{
						num: 4,
					},
					{
						num: 5,
					},
					{
						num: 6,
					},
					{
						num: 7,
					},
					{
						num: 8,
					},
					{
						num: 9,
					},
					{
						num: '.',
					},
					{
						num: 0,
					},
					{
						num: 'X',
					}
				]
			}
		},
		onLoad() {
			this.startCountdown()
		},
		methods: {
			next() {
				const count = this.count + 1
				if (count != this.totalCount) {
					this.count++
				}
			},
			previous() {
				if (this.count > 0) {
					this.count--
					if (this.selectedOptions[this.count] !== undefined) {
						this.$nextTick(() => {});
					}
				}
			},
			radioChange(e) {
				console.log(e, 'eee');
			},
			submit() {
				uni.navigateTo({
					url: '/subpages/banner/practiceResult'
				})
			},
			startCountdown() {
				const timer = setInterval(() => {
					if (this.countdownSeconds > 0) {
						this.countdownSeconds--;
					} else {
						clearInterval(timer);
					}
				}, 1000);
			},
			chooseAnswer() {

			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.popContent {
		width: 630rpx;
		height: 774rpx;
		border-radius: 24rpx;
		text-align: center;
		position: relative;

		.popCon {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			color: #555555;
			margin: 20rpx 0;
		}

		.close {
			position: absolute;
			width: 72rpx;
			height: 72rpx;
			bottom: -100rpx;
			left: 280rpx;
		}

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #1A1A1A;
			margin: 50rpx 0;

		}


		.qr {
			width: 524rpx;
			height: 222rpx;
			margin-top: 50rpx;
		}

		.allBtn {
			display: flex;
			justify-content: center;
			margin-top: 60rpx;

			view {
				width: 239rpx;
				height: 96rpx;
				border-radius: 48rpx;
				text-align: center;
				line-height: 96rpx;
			}

			.fanhui {
				margin-right: 20rpx;
				background: #FFFFFF;
				border: 2rpx solid #1A1A1A;
			}

			.continue {
				background: #FFD275;
			}
		}
	}

	.chapterAll {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.chapter {
		width: 212rpx;
		text-align: center;
		background: #FFFFFF;
		border: 3rpx solid #222222;
		border-radius: 12rpx;
		position: relative;
		margin: 20rpx auto;
		padding: 28rpx;
		box-sizing: border-box;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;


	}

	.three {
		width: 66rpx;
		height: 34rpx;
		position: absolute;
		top: -12rpx;
		right: 54rpx;
	}

	.chapter-active {
		width: 686rpx;
		text-align: center;
		background: #ffebc2;
		border: 3rpx solid #222222;
		border-radius: 12rpx;
		position: relative;
		margin: 20rpx auto;
		padding: 28rpx;
		box-sizing: border-box;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;
	}




	.topOn {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 32rpx;
		background-color: #fff;
		position: sticky;

		.schedule {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
			margin-right: 20rpx;
		}

		.count {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
		}

		.totalCount {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.countdownTitle {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			margin-right: 20rpx;
		}

		.countdownSeconds {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #F54040;
		}
	}

	.main {
		padding: 30rpx;

		.uni-list-cell {
			position: relative;
			display: flex;
			align-items: center;
			padding: 20rpx;
			border: 3rpx solid #222;
			border-radius: 12rpx;
			margin: 40rpx 0;
			background-color: #fff;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.typeLogo {
			background-image: linear-gradient(90deg, #FAE17D 0%, #FFD275 100%);
			border-radius: 4rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 22rpx;
			color: #222222;
			padding: 5rpx 10rpx;
			margin-right: 20rpx;
		}

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
		}

		.three {
			width: 21rpx;
			height: 34rpx;
			;
			position: absolute;
			top: -12rpx;
			right: 21rpx;
		}
	}

	.textbook {
		width: 686rpx;
		height: 300rpx;
		margin: 20rpx auto 0;
	}

	.bottom {
		position: fixed;
		width: 100%;
		// height: 188rpx;
		padding-bottom: 50rpx;
		bottom: 0;
		background-color: #fff;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 26rpx;
		color: #222222;

		.submitBtn {
			width: 510rpx;
			height: 96rpx;
			background: #FFD275;
			border-radius: 48rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 32rpx;
			color: #1A1A1A;
			text-align: center;
			line-height: 96rpx;
			margin: 0 auto;
		}

		.bottom-info {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 35rpx 0;
			box-sizing: border-box;

			.count {
				color: #222222;
				font-size: 26rpx;
				font-family: PingFangSC;
				font-weight: 600;
				line-height: 36rpx;
			}

			.totalCount {
				color: #999999;
				font-size: 26rpx;
				font-family: PingFangSC;
				font-weight: 400;
			}

			.changeBtn {
				width: 130rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
				border: 2rpx solid #222222;
				border-radius: 8rpx;
			}

			.changeBtndis {
				width: 130rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
				border: 2rpx solid #ccc;
				border-radius: 8rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 26rpx;
				color: #CCCCCC;
			}
		}

		.bottom-flex {
			display: flex;
		}
	}
</style>